import { CloseOutlined } from '@ant-design/icons';
import { Col, Form, Input, Row, Tooltip } from 'antd';
import React from 'react';

import LockIcon from '@/assets/svg/lock.svg';
import { LayerInfoFE } from '@/pages/TemplateEditor/interface';

import {
  LayerTypeBE,
  MAX_LAYER_SIZE_NUM,
  MAX_NUM,
  MIN_LAYER_SIZE_NUM,
  MIN_NUM,
  MIN_POSITION_NUM
} from '../../../../../../../../../constant';
import formStyles from '../../index.module.less';
import CustomizedInputNumber from './components/CustomizedInputNumber';
import ScaleInputBox from './components/ScaleInputBox';
import styles from './index.module.less';

interface Props {
  disabled?: boolean;
  layer: LayerInfoFE;
  hasCorner?: boolean;
}

const BaseConfigs = ({ layer, disabled, hasCorner }: Props): JSX.Element => {
  const beType = layer.data.type;
  const { width, height } = layer;

  return (
    <Row gutter={[24, 12]}>
      <Col span={12}>
        <Form.Item label="Position" className={formStyles['form-item']}>
          <Form.Item name="left" noStyle>
            <CustomizedInputNumber
              min={MIN_POSITION_NUM}
              max={MAX_NUM}
              precision={0}
              style={{ width: 72 }}
              disabled={disabled}
              // left、top实际上根据center定位，所以需要减去width/height的一半
              diff={width / 2}
            />
          </Form.Item>
          <div className={styles.connector}>
            <CloseOutlined />
          </div>
          <Form.Item name="top" noStyle>
            <CustomizedInputNumber
              min={MIN_POSITION_NUM}
              max={MAX_NUM}
              precision={0}
              style={{ width: 72 }}
              disabled={disabled}
              // left、top实际上根据center定位，所以需要减去width/height的一半
              diff={height / 2}
            />
          </Form.Item>
        </Form.Item>
      </Col>
      <Col span={12}>
        <Form.Item label="Size" className={formStyles['form-item']}>
          <Form.Item name="width" className="mb-0">
            <CustomizedInputNumber
              min={MIN_LAYER_SIZE_NUM}
              max={MAX_LAYER_SIZE_NUM}
              precision={0}
              style={{ width: 72 }}
              disabled={disabled}
            />
          </Form.Item>
          <div className={styles.connector}>
            {beType === LayerTypeBE.Product ? (
              <Tooltip
                title="The length and width of the product image must be equal."
                placement="topRight"
                align={{ offset: [16] }}
              >
                <LockIcon className={styles['lock-rotation-icon']} />
              </Tooltip>
            ) : (
              <CloseOutlined />
            )}
          </div>
          <Form.Item name="height" className="mb-0">
            <CustomizedInputNumber
              min={MIN_LAYER_SIZE_NUM}
              max={MAX_LAYER_SIZE_NUM}
              precision={0}
              style={{ width: 72 }}
              disabled={disabled}
            />
          </Form.Item>
        </Form.Item>
      </Col>
      <Col span={hasCorner || beType === LayerTypeBE.Product ? 12 : 24}>
        <Form.Item
          name={['data', 'rotation']}
          label="Rotation"
          className={styles.rotation}
        >
          <CustomizedInputNumber
            min={MIN_NUM}
            max={MAX_NUM}
            precision={0}
            disabled={disabled}
            className="w-full"
          />
        </Form.Item>
      </Col>
      {hasCorner && (
        <Col span={12}>
          <Form.Item
            name={
              beType === LayerTypeBE.Text
                ? ['data', 'text', 'borderRadius']
                : ['data', 'graphics', 'borderRadius']
            }
            label="Round Corners"
          >
            <CustomizedInputNumber
              min={MIN_NUM}
              max={MAX_NUM}
              precision={0}
              disabled={disabled}
              className="w-full"
            />
          </Form.Item>
        </Col>
      )}
      {beType === LayerTypeBE.Product && (
        <Col span={12}>
          <Form.Item name={['data', 'ratio']} label="Scale">
            <ScaleInputBox disabled={true} />
          </Form.Item>
        </Col>
      )}
    </Row>
  );
};

export default BaseConfigs;
